<template>
  <div class='works-extract' id="full-screen" @mousemove="showFullScreen" @mouseout="hideFullScreen">
    <BcStart></BcStart>
    <transition name="fade">
      <img class="bac-img" v-if="!isLoading" :src="bac" alt="">
    </transition>
    <button class="btn-start" @click="start">开始</button>

    <div class="ball-b" v-if="isLoading">
      <span>E</span>
      <span>F</span>
      <span>T</span>
      <span>H</span>

      <span class="small-b">W</span>
      <span class="small-b">O</span>
      <span class="small-b">Y</span>
      <span class="small-b">X</span>
    </div>

    <!-- 全屏按钮 -->
    <FullScreen :hiddenFull="hiddenFull" :isFullScreen="isFullScreen" :fullScreen="fullScreen"></FullScreen>
    <Alert v-if="isFullScreen||true" class="very-big"></Alert>
  </div>
</template>
<script>
import BcStart from '../../../components/starts'
import FullScreen from "../../../components/fullScreen";
import Alert from '../../../components/dias/alert'
export default {
  components: {BcStart,FullScreen,Alert},
  name: "",
  data() {
    return {
      bac:require('../../../assets/images/works/bac_3.png'),

      isFullScreen: false, //是否在全屏显示
      settime: null, //显示全面的定时
      hiddenFull: false, // 隐藏

      listData:[],
      index:0,

      socket:null,//即使通讯
      isLoading:false,//是否在loading
    };
  },
  methods: {
    start(){
      // this.isLoading=true
      // setTimeout(()=>{
      //   this.isLoading=false
      // },5000)

      if(this.index==this.listData.length){
        this.$store.state.alertInfo.message='议题已抽取完毕'
        this.$store.state.alertInfo.show=true
        return
      }
      if(this.isLoading)return
      var params={
        id:this.listData[this.index].id
      }
      _g.apiPost('topic/choice.do',params).then(res=>{
        if(res.status==0){
          this.index++
          this.isLoading=true

          setTimeout(()=>{
            
            this.isLoading=false
            this.$store.state.alertInfo.message=this.listData[this.index].name
            this.$store.state.alertInfo.show=true

          },3000)
        }
      })
    },

    fullScreen() {
      _g.fullScreen("full-screen", this);
    },
    showFullScreen(e) {
      var mouseY =e.clientY -document.querySelector(".work-menu").clientHeight -10 -document.querySelector("#full-screen").clientHeight;
      
      var heightModel = this.isFullScreen ? "-260" : "-40";

      // console.log(mouseY,heightModel)

      if (mouseY > heightModel) {
        this.hiddenFull = true;
      } else {
        this.hiddenFull = false;
      }

      $("#full-screen").css({
        cursor: "auto"
      });
      if (this.settime) clearTimeout(this.settime);
      this.settime = setTimeout(() => {
        $("#full-screen").css({
          cursor: "none"
        });
      }, 2000);
    },
    hideFullScreen() {
      this.hiddenFull = false;
    },

    // 获取所有的议题
    getQSlist(){
      _g.apiPost('topic/getTopicNumAndInfo.do').then(res=>{
        if(res.status){
          _g.toMessage(res)
          return
        }
        this.listData=res.data.list
      })
    }
  },
  created() {
    this.getQSlist()
    var that=this
    window.onresize=function(){
      var show = document.querySelector("#full-screen").clientHeight==document.querySelector('html').clientHeight
      that.$set(that,"isFullScreen",show)
    }
  },
  beforeDestroy(){
    // window.onresize=null
  },
  mounted(){
    
  }
};
</script>
<style lang="scss" scoped>
.works-extract {
  height: 100%;
  flex-grow: 1;
  display: flex;
  position: relative;
  overflow: hidden;

  .btn-start{
    position: absolute;
    top: 49.4%;
    left: 47.3%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    // visibility: hidden;
    background-color: transparent;
    color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    z-index: 100;
  }
  .bac-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
.ball-b{
  position: absolute;
  width: 40vh;
  height: 40vh;
  top: 50%;
  left: 50%;
  z-index: 500;
  transform-style: preserve-3d;
  perspective: 500;
  transform-origin: center;
  transform: translate(-50%,-50%);
  animation: move 10s infinite cubic-bezier(.08,.47,.14,.6);

  span{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(133, 133, 133, 0.1);
    box-shadow:3px 3px 2px -1px inset #fff,3px 3px 2px -1px #000;
    color: #fff;
    line-height: 150px;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
  }
  span:nth-of-type(1){
    animation: ani1 10s linear infinite;
  }
  span:nth-of-type(2){
    right: 0;
    animation: ani2 10s linear infinite;
  }
  span:nth-of-type(3){
    right: 0;
    bottom: 0;
    animation: ani3 10s linear infinite;
  }
  span:nth-of-type(4){
    bottom: 0;
    left: 0;
    animation: ani4 10s linear infinite;
  }

  span.small-b{
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

  span:nth-of-type(5){
    animation: ani5 10s linear infinite;
  }
  span:nth-of-type(6){
    animation: ani6 10s linear infinite;
  }
  span:nth-of-type(7){
    animation: ani7 10s linear infinite;
  }
  span:nth-of-type(8){
    animation: ani8 10s linear infinite;
  }
}

@keyframes move {
  0%{
    transform: translate(-50%,-50%) rotateZ(0);
  }
  100%{
    transform: translate(-50%,-50%) rotateZ(-3600deg);
  }
}
@keyframes ani1{
  0%{
    top: 0;
    left: 0;
  }
  100%{
    top: 0;
    left: -200%;
    transform: scale(4)
  }
}
@keyframes ani2{
  0%{
    right: 0;
    top: 0;
  }
  100%{
    right: 0;
    top: -200%;
    transform: scale(3)
  }
}

@keyframes ani3{
  0%{
    right: 0;
  }
  100%{
    right: -200%;
    transform: scale(2)
  }
}
@keyframes ani4{
  0%{
    left: 0;
    bottom: 0;
  }
  100%{
    left: 0;
    bottom: -200%;
  }
}

@keyframes ani5{
  from{}
  to{
    transform: scale(4) translate(-100px,-100px)
  }
}
@keyframes ani6{
  from{}
  to{
    transform: scale(3) translate(100px,-100px)
  }
}
@keyframes ani7{
  from{}
  to{
    transform: scale(2) translate(-100px,100px)
  }
}
@keyframes ani8{
  from{}
  to{
    transform: scale(2) translate(100px,100px)
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>